<template>
  <div class="page-container">
    <page-filter-component @filter-form-submit="fetchTableData">
      <template v-slot:header-opt>
        <el-button
          size="small"
          type="primary"
          @click="toEnterpriseDetail('ADD')"
        >
          新增企业
        </el-button>
      </template>
      <template v-slot:body>
        <el-form-item label="企业名称">
          <el-input v-model="filterForm.company_name" clearable/>
        </el-form-item>
      </template>
    </page-filter-component>

    <el-card class="table-card">
      <div class="table-container">
        <el-table
          size="mini"
          stripe
          :data="tableData.list"
          class="el-table--scrollable-y"
        >
          <el-table-column label="ID" prop="company_id"></el-table-column>
          <el-table-column
            label="企业名称"
            prop="company_name"
          ></el-table-column>
          <el-table-column label="联系人" prop="contact"></el-table-column>
          <el-table-column label="联系电话" prop="tel"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                @click="toEnterpriseDetail('EDIT', row.company_id)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="table-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tableData.page"
          :page-size="tableData.pageSize"
          :total="tableData.total"
          @current-change="onPageChanged"
          @size-change="onPageSizeChanged"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import index from './index.js';

export default index;
</script>

<style scoped lang="less">
@import './index.less';
</style>
